<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第6章：表单与v-model</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>

<div id="form">
    <input type="text" v-model="message" placeholder="输入..."/>
    <input type="text" @input="handleInput" placeholder="输入..."/>
    <textarea type="text" v-model="message" placeholder="输入..."></textarea>
    <p>输入的内容是：{{ message }}</p>
    <p>输入的内容是：{{ e }}</p>
    <input type="radio" :checked="picked">
    <div>
        <input type="radio" v-model="pick" id="ts" value="ts"><label for="ts">TS</label>
        <input type="radio" v-model="pick" id="js" value="js"><label for="js">JS</label>
        <input type="radio" v-model="pick" id="html" value="html"><label for="html">HTML</label>
        <p>选中的是：{{ pick }}</p>
    </div>

    <!-- 复选框 -->
    <div>
        <input type="checkbox" v-model="checkbox" id="checkbox">
        <label for="checkbox">选择状态是:{{ checkbox }}</label>
    </div>
    <!-- 多个复选框 -->
    <div>
        <input type="checkbox" v-model="checkboxed" value="html" id="checkbox_html">
        <label for="checkbox_html">HTML</label>
        <input type="checkbox" v-model="checkboxed" value="js" id="checkbox_js">
        <label for="checkbox_js">JS</label>
        <input type="checkbox" v-model="checkboxed" value="ts" id="checkbox_ts">
        <label for="checkbox_ts">TS</label>
        <p>{{ checkboxed }}</p>
    </div>

    <!-- 下拉列表 -->
    <div>
        <select v-model="selected">
            <optgroup label="d">
                <option>dsadsa</option>
                <option>123</option>
            </optgroup>
            <option>html</option>
            <option>js</option>
            <option>ts</option>
        </select>
        <p>选择的项是：{{ selected }}</p>
    </div>
    <!-- 下拉列表多选 -->
    <div>
        <select v-model="multipleSelected" multiple>
            <optgroup label="d">
                <option>dsadsa</option>
                <option>123</option>
            </optgroup>
            <option>html</option>
            <option value="js">js</option> <!--存在value优先匹配js，不存在匹配option值-->
            <option>ts</option>
        </select>
        <p>选择的项是：{{ multipleSelected }}</p>
    </div>

    <div>
        <select v-model="select_v">
            <option v-for="option in options" :value="option.value">{{ option.text }}</option>
        </select>
        <p>选中的项是：{{ select_v }}</p>
    </div>

    <div>
        <select v-model="select_v_m" multiple>
            <option v-for="option in options" :value="option.value">{{ option.text }}</option>
        </select>
        <p>选中的项是：{{ select_v_m }}</p>
    </div>

    <!-- v-model用于绑定一个静态的变量，v-bind用于绑定一个动态的数据 -->
    <!-- 修饰符,  用于控制数据同步的时间 -->
    <div>
        <!-- 失焦 或者回车才能显示 -->
        <input type="text" v-model.lazy="lazy_show">
        <p>{{ lazy_show }}</p>
        <input type="text" v-model.number="number_show">
        <p>类型：{{ typeof number_show }}</p>
    </div>
</div>

<script>
    new Vue({
        el: '#form',
        data: {
            message: '',
            e: '',
            picked: true,
            pick: 'html',
            checkbox: false,
            checkboxed: ['html'],
            selected: 'html',
            multipleSelected: ["html"],
            select_v: 'html',
            select_v_m: ['html'],
            options: [
                {
                    text: 'HTML',
                    value: 'html'
                }, {
                    text: 'TS',
                    value: 'ts'
                },
                {
                    text: 'JS',
                    value: 'js'
                }
            ],
            lazy_show: '',
            number_show: ''

        },
        methods: {
            handleInput: function (e) {
                this.e = e.target.value;
            }
        }
    })
</script>

</body>
</html>